const gulp = require( "gulp" ),
    connect = require('gulp-connect');
    less = require('gulp-less')

// 在命令行使用 gulp watch 启动此任务
gulp.task('watch', function () {
    // 监听文件修改，当文件被修改则执行 html 任务
    gulp.watch('./js/*.js', gulp.series('js') );
    gulp.watch('./css/*.css', gulp.series('css'));
    gulp.watch('./*.html', gulp.series('html') ); // gulp4.0任务统一使用回调函数，不再支持 ['html'] 这种形式
    gulp.watch('./css/*.less', gulp.series('less'))

})

gulp.task('html',function(){
    return gulp.src('./*.html')
        .pipe(connect.reload());    // 刷新浏览器
})

gulp.task('js',function(){
    return gulp.src('./js/*.js').pipe(connect.reload());
});

gulp.task('css',function(){
    return gulp.src('./css/*.css').pipe(connect.reload());
});

gulp.task('less', function () {
    return gulp.src('./css/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'))
        .pipe(connect.reload());
})

gulp.task('webserver', function() {
    connect.server({
        root: './',
        livereload: true,// 自动刷新
        port: 2333
    });
});

// 开启default任务，管理其他任务
gulp.task('default',gulp.series(gulp.parallel('webserver','watch','html')))
